<script lang="ts" setup>
import { onMounted, ref } from 'vue';

// 1. 创建 ref 对象 ref(null)
// 3. 补充 ref 对象的类型，类型可参考 document.querySelector() 的返回值类型
const h1Ref = ref<HTMLHeadingElement | null>(null)

// 组件的 DOM 节点挂载完毕，可以获取到 DOM 元素
// 温馨提示：后期该语法用于获取到 Vue 组件的实例
onMounted(() => {
  // 鼠标悬停看 querySelector 可以看到返回值的类型
  const h1DOM = document.querySelector('h1')
  console.log(h1DOM)

  console.log('onMounted', h1Ref.value)
  // 3. 类型补充后，就有代码提示啦，测试调用 DOM 元素的 append 方法
  h1Ref.value?.append('!!!')
})
</script>

<template>
  <!-- 2. 绑定 ref 对象 -->
  <h1 class="title" ref="h1Ref">Hello World</h1>
</template>
